<template>
  <div class="profit">
    <div class="mb-15">
      <div class="flex flex-cc mb-15">
        <span class="cl-basic mr-10">{{ $t('总资产') }}</span>
        <span class="fz-24">{{ allBalance }} U</span>
      </div>

      <div class="flex flex-rb ta-center">
        <div
          class="radius p-10 pt-20 pb-20 bcl-black cl-white"
          style="width: calc(50% - 7.5px)"
        >
          <div class="flex flex-col flex-rb pt-5 pb-5">
            <div>{{ $t('共识订单额') }}</div>
            <div class="fz-18 fw-bold">{{ allLevelBalance }} U</div>
          </div>

          <!-- <div
            class="bcl-white cl-black p-10 click ta-center"
            style="border-radius: 100px"
            @click="withdraw('amount')"
          >
            <div>{{ $t('提现') }}</div>
          </div> -->
        </div>

        <div
          class="radius p-10 pt-20 pb-20 bcl-primary"
          style="width: calc(50% - 7.5px)"
        >
          <div class="flex flex-col flex-rb pt-5 pb-5">
            <div>{{ $t('市场收益额') }}</div>
            <div class="fz-18 fw-bold">{{ allMarketBalance }} U</div>
          </div>

          <div
            class="bcl-black cl-white p-10 click ta-center"
            style="border-radius: 100px"
            @click="withdraw('profit')"
          >
            <div>{{ $t('提现') }}</div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="title flex mb-15">
        <van-button
          class="mr-10"
          style="width: 100px; height: 35px"
          round
          v-for="(v, i) in tabs"
          :key="i"
          :type="i === tabIndex ? 'primary' : 'default'"
          @click=";(tabIndex = i), (page = 1), getProfitList()"
        >
          {{ v }}
        </van-button>
      </div>

      <div v-if="profits.length">
        <ul class="fz-12">
          <li
            class="box-white p-20 bcl-bg mb-10"
            v-for="(v, i) in profits"
            :key="i"
          >
            <div
              class="flex flex-wrap bd-bottom pb-10 mb-10"
              style="border-color: #ebebeb"
            >
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('当前余额') }}:</span>
                <span>{{ toFixed(v.value) }} U</span>
              </div>
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('执行前余额') }}:</span>
                <span>{{ toFixed(v.balance) }} U</span>
              </div>
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('支出类型') }}:</span>
                <span>{{ directions[v.direction] }}</span>
              </div>
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('类型') }}:</span>
                <span>{{ v.abstract }}</span>
              </div>
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('状态') }}:</span>
                <span>{{ states[v.state] }}</span>
              </div>
              <div style="width: 50%">
                <span class="cl-basic mr-5">{{ $t('Hash') }}:</span>
                <span class="click" @click="copyString(v.hash)">
                  {{ v.hash }}
                </span>
              </div>
            </div>

            <div class="flex flex-cc">
              <img
                class="mr-5"
                style="width: 10px"
                src="../assets/img/icon_circle.png"
              />
              <div class="fz-12">
                <span>{{ $t('时间') }}:</span>
                <span v-if="v.date">{{ v.date }}</span>
                <span v-else>{{ $t('无') }}</span>
              </div>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <van-pagination
          class="mt-10"
          mode="simple"
          :prev-text="$t('上一页')"
          :next-text="$t('下一页')"
          :total-items="total"
          :items-per-page="size"
          @change="() => getProfitList()"
          v-model="page"
        ></van-pagination>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { showToast, copyString, toFixed } from 'js/utils'
import api from 'js/api'

const accounts = ref(['amount', 'profit', 'team'])
const directions = ref([$t('收'), $t('支')])
const states = ref([$t('未生效'), $t('已生效')])

const tabs = ref([$t('共识收益'), $t('直间收益'), $t('团队收益')])
const tabIndex = ref(0)

const allLevelBalance = ref(0)
const allMarketBalance = ref(0)
const allBalance = computed(() => {
  return toFixed(Number(allLevelBalance.value) + Number(allMarketBalance.value))
})

const profits = ref([])
const page = ref(1)
const size = ref(5)
const total = ref(0)

initPage()

function initPage() {
  getAllProfit('amount')
  getAllProfit('profit')
  getProfitList()
}

// 获取总收益
async function getAllProfit(account = 'amount') {
  let allProfits = []
  let allBalance = 0

  if (account === 'amount') {
    allProfits = await getProfitList(account)
  } else {
    const allProfits1 = await getProfitList('profit')
    const allProfits2 = await getProfitList('team')
    allProfits = [...allProfits1, ...allProfits2]
  }

  allProfits.map((v) => {
    allBalance += Number(v.balance)
  })

  if (account === 'amount') {
    allLevelBalance.value = toFixed(allBalance)
  } else {
    allMarketBalance.value = toFixed(allBalance)
  }
}

// 获取收益列表
function getProfitList(account = '') {
  return new Promise(async (resolve) => {
    const params = {
      page: page.value,
      limit: size.value,
      account: account ? account : accounts.value[tabIndex.value],
    }

    if (account) {
      params.page = 1
      params.limit = 100000
      params.account = account
    }

    const { code, data } = await api.getProfitList(params)

    if (code === 1) {
      if (account) {
        resolve(data?.data || [])
      } else {
        profits.value = data?.data || []
        total.value = data?.total || 0
      }
    }
  })
}

// 提现
async function withdraw(account = 'amount') {
  const params = {
    account,
  }

  const { code, msg } = await api.withdraw(params)

  if (code === 1) {
    showToast(msg)
    setTimeout(initPage, 0)
  }
}
</script>

<style lang="scss" scoped></style>
